<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    width="60vw"
    style="min-width: 800px"
    :before-close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      v-loading="loading"
      :model="formData"
      :rules="rules"
      label-width="125px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item label="注册地" prop="domicile">
            <el-cascader
              v-model="formData.domicile"
              :options="userStore.getDictOptions('10')"
              :props="cascaderProps"
              placeholder="请选择注册地"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="资质管理同事" prop="manager">
            <el-select
              v-model="formData.manager"
              placeholder="请选择资质管理同事"
              clearable
            >
              <el-option :value="1" label="正常" />
              <el-option :value="0" label="禁用" />
            </el-select>
          </el-form-item>
          <el-form-item label="国家高新技术企业" prop="isNHTE">
            <el-switch
              v-model="formData.isNHTE"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
          <el-form-item label="国高证书编号" prop="nhteNumber">
            <el-input
              v-model="formData.nhteNumber"
              placeholder="请输入国高证书编号"
            />
          </el-form-item>
          <el-form-item label="专精特新企业" prop="isSPSEnterprises">
            <el-switch
              v-model="formData.isSPSEnterprises"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
          <el-form-item label="最新认定成功时间" prop="spsAppliTime">
            <el-date-picker
              v-model="formData.spsAppliTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择最新认定成功时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创新型中小企业" prop="isInnovativeSME">
            <el-switch
              v-model="formData.isInnovativeSME"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
          <el-form-item label="最新认定成功时间" prop="smeAppliTime">
            <el-date-picker
              v-model="formData.smeAppliTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择最新认定成功时间"
            />
          </el-form-item>
          <el-form-item label="科技型中小企业" prop="isSMETech">
            <el-switch
              v-model="formData.isSMETech"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
          <el-form-item label="最新认定成功时间" prop="smeTechAppliTime">
            <el-date-picker
              v-model="formData.smeTechAppliTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择最新认定成功时间"
            />
          </el-form-item>
          <el-form-item label="公司状态">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
        <el-button @click="closeDialog"> 取 消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { addCompany, getCompanyForm, updateCompany } from '@/api/company'
import { CompanyForm } from '@/api/company/types'
import { useUserStore } from '@/store/modules/user'
// import type { CascaderValue } from 'element-plus'

defineOptions({
  name: 'CompanyAddAndUpdate',
  inheritAttrs: false
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    // add-新增 update-更新
    default: 'add'
  }
})
const emit = defineEmits(['update:visible', 'handleQuery'])
const dialogVisible = useVModel(props, 'visible', emit)
const userStore = useUserStore()
const ruleFormRef = ref(ElForm)
const loading = ref(false)
let formData = reactive<CompanyForm>({
  id: 0,
  name: '',
  domicile: '',
  manager: '',
  isNHTE: false,
  nhteNumber: '',
  isSPSEnterprises: false,
  spsAppliTime: '',
  isInnovativeSME: false,
  smeAppliTime: '',
  isSMETech: false,
  smeTechAppliTime: '',
  status: 1
})
const rules = reactive({
  name: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
  domicile: [{ required: true, message: '注册地不能为空', trigger: 'blur' }]
})
const cascaderProps = {
  // expandTrigger: 'hover' as const,
  value: 'code',
  label: 'name'
}

watch(
  () => props.id,
  (nv, ov) => {
    if (nv) {
      formData.id = nv
      loading.value = true
      getCompanyForm(nv)
        .then(({ data }) => {
          Object.assign(formData, data)
        })
        .finally(() => (loading.value = false))
    }
  },
  {
    immediate: true
  }
)

const handleChange = (data: any) => {
  // console.log('handleChange', data)
  formData.domicile = data.join('-')
}

/** 表单提交 */
function handleSubmit() {
  ruleFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true
      if (props.id) {
        updateCompany(props.id, formData)
          .then(() => {
            ElMessage.success('修改成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      } else {
        addCompany(formData)
          .then(() => {
            ElMessage.success('新增成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      }
    }
  })
}

/** 关闭弹窗 */
function closeDialog() {
  dialogVisible.value = false
  resetForm()
}

/** 重置表单  */
function resetForm() {
  ruleFormRef.value.resetFields()
}
</script>
